<template>
	<view class="container">
		<!-- 合同标题 -->
		<view class="header">
			<text class="contract-title">购销合同</text>
		</view>

		<!-- 合同内容 -->
		<view class="contract-content">
			<!-- 合同编号 -->
			<view class="contract-item">
				<text class="label">合同编号：</text>
				<text class="value">{{ contractData.contractId }}</text>
			</view>

			<!-- 合同正文 -->
			<view class="contract-body">
				<text>{{ contractData.contractDetails }}</text>
			</view>

			<!-- 甲方签字 -->
			<view class="signature-section">
				<text class="label">甲方签字：</text>
				<text class="signature">{{ contractData.createBy }}</text>
			</view>

			<!-- 乙方签字 -->
			<view class="signature-section">
				<text class="label">乙方签字：</text>
				<text class="signature">乙方名字</text>
			</view>

			<up-tabbar activeColor="#6bc493">
				<up-tabbar-item text="首页" icon="/static/shou.png"
					@click="navigateTo('/pages/index/index')"></up-tabbar-item>
			</up-tabbar>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		contractid
	} from '@/common/api.js';
	// 定义响应式变量 contractData 来存储合同数据
	const contractData = ref({
		contractId: '',
		title: '购销合同',
		partyA: '土地有限公司', // 甲方名字固定
		partyB: '',
		contractDetails: `本合同由甲方（某某电子有限公司）与乙方（某某商贸公司）签订，主要内容包括：产品购销条款、交货日期、付款方式等详细信息。

条款 1：甲方需按乙方要求提供符合规格的产品。
条款 2：交货日期为 2024 年 12 月 31 日。
条款 3：付款方式为签订合同后 30 天内付款。

其他条款：本合同由双方代表签字后生效，合同生效期为 1 年，合同中如有未尽事宜，可由双方友好协商解决。
`,
		createBy: '某某电子有限公司', // 甲方签字人
		yi: '乙方名字' // 乙方签字人
	});

	// 在页面加载时获取传递的参数
	onMounted(() => {
		// 获取当前页面栈
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1]; // 获取当前页面实例

		// 检查页面是否有参数传递
		if (currentPage && currentPage.options) {
			// 从 URL 参数中获取传递过来的合同 ID、甲方和乙方的名字
			contractData.value.id = currentPage.options.id;
			const params = {
				contractId: contractData.value.id
			};
			contractid(params).then(res => {
				contractData.value = res.data;
			})
		} else {
			console.log('没有上一页或未接收到参数');
		}
	});

	// 跳转
	const navigateTo = (url) => {
		uni.navigateTo({
			url,
			fail: (err) => {
				console.error('Failed to navigate:', err);
			},
		});
	};
</script>

<style scoped>
	.container {
		padding: 10px;
		/* 减少 padding，使内容更加紧凑 */
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		justify-content: flex-start;
		/* 改为 flex-start，使内容靠上 */
	}

	.header {
		text-align: center;
		margin-bottom: 10px;
		/* 减少外边距，使标题更加靠近正文 */
	}

	.contract-title {
		font-size: 22px;
		/* 略微减小字体 */
		font-weight: bold;
	}

	.contract-content {
		background-color: #ffffff;
		padding: 15px;
		/* 减少内边距，使卡片内容紧凑 */
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
		/* 减少外边距 */
	}

	.contract-item {
		margin-bottom: 8px;
		/* 减少每项之间的间距 */
	}

	.label {
		font-weight: bold;
		color: #333;
		margin-right: 5px;
		/* 保持标签和内容之间的适当间距 */
	}

	.value {
		color: #555;
		font-size: 16px;
	}

	.contract-body {
		margin-top: 10px;
		/* 减少顶部间距，使正文更加靠近 */
		color: #333;
		font-size: 14px;
		line-height: 1.5;
		white-space: pre-wrap;
		/* 保持换行符 */
		margin-bottom: 10px;
		/* 减少底部间距 */
	}

	.signature-section {
		display: flex;
		align-items: center;
		margin-top: 10px;
		/* 减少上下间距 */
	}

	.signature {
		font-size: 16px;
		font-weight: bold;
		color: #007bff;
		/* 使用蓝色来强调签字 */
		margin-left: 5px;
	}
</style>